<!DOCTYPE html>
<html> 
  <head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>yukari world</title>
    <#include "/lib/base_source.ftl">
      <style type="text/css">
      </style>
  </head> 
  <body>
    <div class='whole-container'>
      <#include "/lib/header.ftl">
        <div>
          <ul class="breadcrumb">
            <li>抽奖管理</li><span class="divider">/</span>
            <li>鱼吧抽奖器</li>
          </ul>
        </div>
        <div class="container-fluid">
          <div class="row-fluid">
            <div class="container span12">
              <#include "/lib/alert.ftl">
                 <div class='main-content'>
                    <div class="well form-horizontal">
                        <div class='main-action'>
                        	<form id="findForm">
                        		<div class="control-group">
	                                <label class="control-label">av号：</label>
	                                <div class="controls">
	                                    av<input type="text" id="av" name="av" value="" />
	                                </div>
	                            </div>
                        		<div class="control-group">
	                                <label class="control-label">抽奖人数：</label>
	                                <div class="controls">
	                                    <input type="text" id="size" name="size" value="" />
	                                </div>
	                            </div>
                        		<div class="control-group">
	                                <label class="control-label">查询方式：</label>
	                                <div class="controls">
	                                    <input type="radio" name="repeat" value="true" />按回复(重复回复有效)&nbsp;&nbsp;<input type="radio" name="repeat" value="false" checked/>按人数(重复回复无效)
	                                </div>
	                            </div>
                        		<div class="control-group">
	                                <label class="control-label"></label>
	                                <div class="controls" id="message">
	                                	
	                                </div>
	                            </div>
                        	</form>
                        		<div class="control-group">
	                                <label class="control-label"></label>
	                                <div class="controls">
	                                    <a id="lotteryBtn" onclick="lottery()" class="btn btn-info btn-sm">抽奖</a>
	                                </div>
	                            </div>
                        </div>
                    </div>
                    
                    <div class="table-content">
                    <#-- table -->
                        <table class="table-striped table-condensed table-hover" id="itemTable" style="width: 100%;max-width: 100%;margin-bottom: 20px;font-size:12px;word-break:break-all;word-wrap:break-word;">
                        </table>
                        <div class="pagination" id="itemPage"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
  <script>
    $(document).ready(function() {
	});
	
	var lotteryFlag = true;
	function lottery(){
		if (lotteryFlag){
			lotteryFlag = false;
			var av = $("#av").val();
			var size = $("#size").val();
			var repeat = $("input[name=repeat]:checked").val();
			var message = $("#message");
			message.html("抽奖中...请给我一首歌的时间(๑•ᴗ•๑)");
			$("input[name=repeat]").prop("readonly","readonly");
			$.ajax({
				url : "${rc.contextPath}/admin/random/bilibili",
		    	dataType : "json",
		    	data :  {"av":av,"size":size,"repeat":repeat},
		    	type:'post',
		    	success:function(json){
		    		if (json.code == 0){
		    			var data = json.data;
		    			for(var i=0;i<data.authArray.length;i++){
		    				showResult(data.authArray[i]);
		    			}
		    			message.html("抽奖完成！参与人数"+data.total);
		    		} else {
		    			alert("抽奖失败: "+json.message);
		    		}
		    	}
			});
		}
	}
	
	
	function showResult(data){
		var tr = $('<tr style="color:#6d757a"></tr>');
		var tr2 = $('<tr></tr>');
		var iconTd = $('<td valign="top" rowspan="2" style="width:52px;"><a href="https://space.bilibili.com/'+data.mid+'" target="_blank"><img style="width:52px;" src="data:image/'+data.imgType+';base64,'+data.imgBase64+'"/></a></td>')
		var nameTd = $('<td style="text-align:left;width:300px">'+data.uname+'</td>');
		var timeTd = $('<td style="text-align:left;width:200px">'+data.time+'</td>')
		var floorTd = $('<td style="text-align:left;width:100px">#'+data.floor+'</td>')
		var pageTd = $('<td style="text-align:left;width:100px">'+data.page+'页'+data.index+'层</td>')
		var msgTd = ('<td colspan="5" style="color:#333;font-size:20px;text-align:left;">'+data.message+'</td>');
		tr.append(iconTd);
		tr.append(nameTd);
		tr.append(timeTd);
		tr.append(floorTd);
		tr.append(pageTd);
		tr.append($("<td></td>"));
		tr2.append(msgTd);
		$("#itemTable").append(tr).append(tr2);
	}
	
		
   </script>
</body>
</html>